<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<title>荣誉称号管理</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#app {
				width: 1200px;
				margin: 30px auto;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			}

			.el-header {
				margin-top: 10px;
				height: 300px;
			}

			.name {
				height: 50px;
				position: sticky;
				top: 0px;
				z-index: 999;
				background-color: white;
				border: 2px solid #F8F8FF;
				margin-top: 0px;
			}

			.title {
				width: 150px;
				height: 40px;
				margin-top: 15px;
				text-align: center;
			}

			.add-data {
				width: 150px;
				height: 40px;
				margin-top: 8px;
				margin-left: 35px;
			}

			.search {
				width: 230px;
				height: 40px;
				margin-top: 7px;
				font-size: 15px;
			}

			.search_span {
				font-size: 15px;
				padding-left: 50px;
				margin-top: 15px;
			}

			.status {
				width: 350px;
				margin-top: 7px;
				height: 40px;
				font-size: 15px;
			}

			.search-icon {
				width: 600px;
				margin-top: 15px;
				height: 40px;
				font-size: 15px;
			}

			.el-main {}

			.main_text {
				width: 1100px;
				margin: 0 auto;
			}

			.el-footer {
				height: 40px;
			}

			.page {
				width: 550px;
				margin: 15px auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header class="name">
					<el-row>
						<el-col :span="21">
							<div class="title">
								<h3>荣誉称号管理</h3>
							</div>
						</el-col>
						<el-col :span="1">
							<div class="add-data">
								<el-button type="primary" style="color: white;" @click="add()">添加
								</el-button>
							</div>
						</el-col>
					</el-row>
				</el-header>
				<!-- 页眉 -->
				<el-header>
					<el-row>
						<el-col :span="2">
							<div class="search_span">名称:</div>
						</el-col>
						<el-col :span="8">
							<div class="search">
								<el-input v-model="search_message" placeholder="请输入关键词"> </el-input>
							</div>
						</el-col>
						<el-col :span="11">
							<div class="status">
								<span>流程状态：</span>
								<el-select v-model="status_value" placeholder="请选择">
									<el-option label="审核中" value="审核中"></el-option>
									<el-option label="审核已完成" value="审核已完成"></el-option>
								</el-select>
							</div>
						</el-col>
						<el-col :span="3">
							<div class="search-icon">
								<el-button type="primary" size="small" icon="el-icon-search"
									@click="search(search_message,status_value)">搜索</el-button>
							</div>
						</el-col>
					</el-row>
				</el-header>
				<!-- 正文 -->
				<el-main>
					<el-row>
						<el-col :span="24">
							<div class="main_text">
								<template>
									<el-table :data="tableData" stripe border style="width: 100%" highlight-current-row>
										<el-table-column fixed type="index" label="序号" width="50"></el-table-column>
										<el-table-column fixed prop="tianbaoName" label="填报人" width="80"></el-table-column>
										<el-table-column prop="rongyuChengHao" label="名称" width="300"></el-table-column>
										<el-table-column prop="createTime" label="提交时间" width="160"></el-table-column>
										<el-table-column prop="status" label="流程状态" width="100">
										</el-table-column>
										<el-table-column fixed="right" label="操作" width="250">
											<template slot-scope="scope">
												<el-button type="primary" size="mini" @click="Change()">修改
												</el-button>
												<el-button type="primary" size="mini">删除
												</el-button>
												<el-button type="primary" size="mini" @click="chaKan()">查看
												</el-button>
											</template>
										</el-table-column>
									</el-table>
								</template>
							</div>
						</el-col>
					</el-row>
				</el-main>
				<!-- 页尾 -->
				<el-footer>
					<el-row>
						<el-col :span="24">
							<div class="page">
								<el-pagination @click="change_page(index)" :page-sizes="[page_sizes]"
									layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
									:background="true"></el-pagination>
							</div>
						</el-col>
					</el-row>
				</el-footer>
			</el-container>
		</div>
	</body>
</html>
<script>
	//3:由Vue挂载elements
	new Vue({
		el: "#app",
		data: {
			id: "",
			search_message: "",
			status_value: "",
			page_sizes: 5,
			tableData: [1],
			search_options: [{
				value: 'tableData.project',
			}],
			status_options: [{
				value: '选项1',
				label: '审核中',
			}, {
				value: '选项2',
				label: '审核完成',
			}],
		},
		methods: {
			findAll: function() {
				axios("http://localhost:8080/rongyuchenghao/findall").then((res) => {
					this.tableData = res.data.data.records
					console.log(this.tableData)
				})
			},
			search: function(search_message,status_value) {
				if(search_message !== "" && status_value === "") {
					axios("http://localhost:8080/rongyuchenghao/findbystr/" + search_message).then((res) => {
						this.tableData = res.data.data
						console.log(this.tableData)
						if (this.tableData.length === 0) {
							this.$alert('未查询到相关内容', '查询错误', {
								confirmButtonText: '确定',
								callback: action => {
									this.$message({
										type: 'info',
										message: `action: ${ action }`
									});
									this.findAll()
								}
							});
						}
					})
				} else if(search_message === "" && status_value !== "") {
					axios("http://localhost:8080/rongyuchenghao/findbystatus/" + status_value).then((res) => {
						this.tableData = res.data.data
						console.log(this.tableData)
						if (this.tableData.length === 0) {
							this.$alert('未查询到相关内容', '查询错误', {
								confirmButtonText: '确定',
								callback: action => {
									this.$message({
										type: 'info',
										message: `action: ${ action }`
									});
									this.findAll()
								}
							});
						}
					})
				} else if(search_message !== "" && status_value !== "") {
					axios("http://localhost:8080/rongyuchenghao/findlike/" + status_value + "/" +
						search_message).then((res) => {
						this.tableData = res.data.data
						console.log(this.tableData)
						if (this.tableData.length === 0) {
							this.$alert('未查询到相关内容', '查询错误', {
								confirmButtonText: '确定',
								callback: action => {
									this.$message({
										type: 'info',
										message: `action: ${ action }`
									});
									this.findAll()
								}
							});
						}
					})
				} else {
					this.$alert('请输入关键字或者选择流程状态', '查询错误', {
						confirmButtonText: '确定',
						callback: action => {
							this.$message({
								type: 'info',
								message: `action: ${ action }`
							});
						}
					});
				}
			},
			change_page: function(index) {

			},
			chaKan: function() {
				// this.id = row.id
				// localStorage.setItem("id", this.id)
				window.location="chaKanRongyuchenghao.html"
			},
			add: function() {
				window.location = "addRongYu.html"
			},
			Change: function() {
				// this.id = row.id
				// localStorage.setItem("id",this.id)
				window.location = "updateRongYu.html"
			}
		},
		created: function() {
			this.findAll()
		},
	})
</script>
